<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script src = "js/jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
        height: 10vh;
    }

    li {
        float: left;
    }

    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 25px 16px;
        text-decoration: none;
    }
    li a:hover {
        background-color: #111;
    }
    section #info{
        height: 100px;
        background:url("./pic/intro.jpg") top center;
        background-size: cover;
    }

    #enroll{
        width: 100%;
        height: 100vh;
        position: relative;
        background: url("./pic/usc.jpg") top center;
        background-size: cover;
    }
    #enroll div{
        position: absolute;
        left: 40%;
        top:30%;
    }

    #roll {
        position: absolute;
        left: 50%;
    }
</style>

<nav><ul><li><a href="index.jsp">学生信息管理系统</a></li>
    <li><a href="studentInfo.html">信息查看</a></li>
    <li> <a href="loggingCheck.html">登录</a></li>
    <li> <a href="enroll.html">添加</a></li></ul>

</nav>
<body>
<section id="enroll">

    <div id="enroll-div">
        用户名 : <input type="text" name="username" id="uid">
        <br>
        密  码 ： <input type="password" name="password" id="upsd1">
        <br>
        密  码 ： <input type="password" name="password" id="upsd2">
        <br>
        <input type="submit"  id="roll" value="添加">
        <br>
        <br>
        <br>
        <span  id="uid_msg"></span></div>

</section>


</body>
<script>
    var checkusername = false;
    var checkpsd1 = false;
    var checkpsd2 = false;
    //1.给用户名的输入框派发blur事件
    $(function (){
        $("#uid").blur(function (){
            //2.获取用户名
            var username = $("#uid").val();
            console.log(username.length);
            if(username.length === 0){
                $("#uid_msg").css("color", "greenyellow").html("用户名不可为空值");
            }else{
            $.post("/studentSystem/checkUserServlet",{"username":username},function (data){
                //3. 判断pass 如果为true，用户成功登录，msg设置为绿色，放到span中
                // console.log(data)
                if(data.pass){
                    //用户名可以使用
                    $("#uid_msg").css("color", "greenyellow").html(data.msg);
                    checkusername = true;
                }else{
                    //用户名不可以使用
                    $("#uid_msg").css("color","white").html(data.msg);
                    // console.log(data)
                }
            },"json");}

        })
        //4. 判断密码长度是否符合标准即不大于28个字符
        $("#upsd1").blur(function(){
            //获取密码
            var psd1 = $("#upsd1").val();
            console.log(psd1.length);
            if(psd1.length > 28 | psd1.length < 1){
                $("#uid_msg").css("color","white").html("<text>密码长度小于1位或者已超过28位，请更改密码</text>");
            }else{
                checkpsd1 = true;
            }
        });

        //4. 判断两次输入密码是否相同
        $("#upsd2").blur(function (){
            //2.获取两次密码
            var psd1 = $("#upsd1").val();
            var psd2 = $("#upsd2").val();
            if(psd1 == psd2){
                //如果相等就表示可以使用
                $("#uid_msg").css("color", "greenyellow").html("<text>密码可以使用</text>");
                checkpsd2 = true;
            }else {
                $("#uid_msg").css("color","white").html("<text>两次输入密码不同，请重新输入</text>")
            }
        })

        //5 注册用户信息到数据库中，注册成功后自动跳入登录界面
        $("#roll").click(function (){
            //获取用户名和密码
            var username = $("#uid").val();
            var psd1 = $("#upsd1").val();
            if(checkusername && checkpsd1 && checkpsd2){
                $.post("/studentSystem/enrollServlet", {"username":username, "password":psd1},function (data){
                    console.log(data);
                    if(data.isPass){
                        //注册成功
                        $("#uid_msg").css("color", "greenyellow").css("font-size", "30px").html(data.msg);

                        // var logging = $(location).attr("href","loggingCheck.html");
                        // setTimeout(logging, 10000);
                    }else{
                        //注册失败
                        $("#uid_msg").css("color","white").html(data.msg);
                    }
                },"json");
            }
            else{
                alert("请检查用户名和密码是否输入正确");
            }
        })

    })
</script>
</html>